<template>
  <div class="detail">
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar style="background-color: #f4b4b6" title="个人信息" left-text="返回" fixed left-arrow
        @click-left="onClickLeft" />
      <!-- 占位 -->
      <div style="height: 50px"></div>
    </div>
    <div class="box">
      <!-- 头像 -->
      <van-cell style="margin-bottom: 10px">
        <template #title>
          <van-image round width="4rem" height="4rem" :src="userFace" />
          <span class="name">用户名：{{ userInfoObj.username }}</span>
        </template>
        <template #right-icon>
        </template>
      </van-cell>
      <!-- 信息 -->
      <div class="content">
        <van-cell title="用户名" is-link class="spanTitle" icon="user-o" :value="userInfoObj.username" @click="editInfo">
        </van-cell>
        <van-cell title="姓名" is-link class="spanTitle" icon="user-o" :value="userInfoObj.nickname" @click="editInfo">
        </van-cell>
        <van-cell title="角色" is-link class="spanTitle" icon="user-o"  value="教练员" @click="editInfo">
        </van-cell>
        <van-cell title="手机" is-link class="spanTitle" icon="phone-o" :value="userInfoObj.number" @click="editInfo">
        </van-cell>
        <van-cell title="注册时间" is-link class="spanTitle" icon="clock-o" :value="userInfoObj.createTime | fmtDate">
        </van-cell>
      </div>
      <!-- 密码 -->
      <van-cell title="修改密码" is-link class="spanTitle" icon="bag-o" @click="editPassword" style="margin-top: 20px">
      </van-cell>

      <!-- 修改信息面板 -->
      <van-action-sheet v-model="show" title="修改信息">
        <div class="content">
          <van-field v-model="userForm.username" label="用户名" placeholder="请输入姓名" />
          <van-field v-model="userForm.nickname" label="姓名" placeholder="请输入姓名" />
          <van-field v-model="userForm.number" label="手机" placeholder="请输入手机号" />
          <div style="margin: 16px">
            <van-button round block @click="submitInfo" class="subBtn">提交</van-button>
          </div>
        </div>
      </van-action-sheet>


      <!-- 修改密码面板 -->
      <van-action-sheet v-model="passwordShow" title="修改密码">
        <div class="content">
          <van-field v-model="password" label="新密码" type="password" placeholder="密码长度大于3" />
          <van-field v-model="newPassword" label="确认密码" type="password" placeholder="请再次输入密码" />
          <div style="margin: 16px">
            <van-button round block @click="submitPassword" class="subBtn">确定</van-button>
          </div>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
  import {
    get,
    post_json,
    post_formData
  } from "@/http/axios";
  import { Toast } from 'vant';
  import {
    mapActions,
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        userFace:require('../../assets/tx.png'),
        userForm: {},
        userInfoObj:{},
        gender: "",
        show: false,
        passwordShow: false,
        photoShow: false,
        showDatePanel: false,
        // 新密码
        password: "",
        // 确认密码
        newPassword: "",

        // 上传的头像
        fileList: [],
        // 出生日期时间戳
        timestamp: "",
      };
    },
    computed: {
      // 引入用户信息对象
      ...mapState("user", ["userInfo"]),
    },
    methods: {
      // 引入用户数据
      ...mapActions("user", ["getUserInfo"]),
      // 提交密码
      submitPassword() {
        if (this.password.length > 3 && this.newPassword.length > 3) {
          this.$dialog
            .confirm({
              title: "修改密码",
              message: "你确定需要修改密码吗？",
            })
            .then(async () => {
              if (this.password == this.newPassword) {
                this.userForm.password = this.newPassword;
                let res = await post_json("/user/updateUser", this.userForm);
                if(res.data.code === 0 ){
                  Toast.success('修改密码成功');
                  this.getUserInfo()
                  this.passwordShow = false;
                }else{
                  Toast.fail('修改失败');
                }
              } else {
                this.passwordShow = false;
                this.$toast.fail("两次输入的密码不同");
              }
            })
            .catch(() => {});
        } else {
          this.$toast.fail("密码长度需大于3");
        }
      },
      // 修改个人用户信息
      async submitInfo() {
        let res = await post_json("/user/updateUser", this.userForm);
        if(res.data.code === 0){
          Toast.success(res.data.data);
          this.getUserInfo()
          this.show = false;
        }else{
          Toast.fail('修改失败');
        }
      },
      // 获取用户信息
      async getUserInfo(){
        let res = await get('/user/getInfo',"")
        if(res.data.code === 0){
          this.userInfoObj = res.data.data
          this.userForm = this.userInfoObj
        }
      },
      editInfo() {
        this.show = true;
      },
      editPassword() {
        this.passwordShow = true;
        this.password = "";
        this.newPassword = "";
      },
      onClickLeft() {
        this.$router.go(-1);
      },
    },
    mounted(){
      this.getUserInfo()
    }
  };
</script>
<style lang='less' scoped>
  .subBtn {
    color: white;
    background-color: #f4b4b6;
  }

  .editPhoto {
    margin-left: 110px;
    margin-top: 25px;
  }

  .content .spanTitle {
    font-size: 15px;
    color: rgb(99, 99, 99);
  }

  .van-cell__value {
    flex: 2;
  }

  .van-cell__left-icon {
    margin-right: 8px;
    font-size: 20px;
    color: #f4b4b6;
  }

  .box .name {
    font-size: 16px;
    margin-left: 10px;
  }

  .detail {
    background-color: #f7f8fa;
    height: 650px;
  }

  /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar__text {
    color: #fff;
  }

  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
</style>